<template>
  <div class="mod-home">
    <el-row :gutter="15">
      <!-- 左边部分 -->
      <el-col :span="16">
        <el-row :gutter="20">
          <el-col :span="10">
            <!-- 管理员信息 -->
            <el-card class="mgb20" style="height:340px">
              <div style="text-align: right">
                <el-button type="text" icon="el-icon-edit" @click="updateAdmin(adminInfo.userId)"/>
              </div>
              <div class="admin-info">
                <img :src="adminInfo.avatar" style="width: 120px;height: 120px;border-radius: 50%;"/>
                <div class="admin-info-cont">
                  <div class="admin-info-name">{{ adminInfo.username }}</div>
                  <el-tag>{{ adminInfo.roles[0].roleName }}</el-tag>
                </div>
              </div>
              <el-divider></el-divider>
              <div class="admin-info-list">
                上次登录时间：
                <span>{{ adminInfo.loginTime }}</span>
              </div>
              <div class="admin-info-list">
                上次登录地点：
                <span>{{ adminInfo.location }}</span>
              </div>
              <div class="admin-info-list">
                上 次 登 录 IP：
                <span>{{ adminInfo.ip }}</span>
              </div>
            </el-card>
            <update-admin v-if="updateAdminVisible" ref="updateAdmin"/>
          </el-col>
          <el-col :span="14">
            <el-card>
              <div class="grid-content bg-purple">
                <!-- 用户登入报表 -->
                <div id="loginReport" style="width: 600px;height:300px;"></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!-- Echarts表格 -->
        <el-card class="box-card" style="margin-top: 20px">
          <el-row :gutter="40" type="flex" class="panel-group" justify="space-around">
            <el-col :xs="12" :sm="12" :lg="7" class="card-panel-col">
              <div class="card-panel" @click="handleSetLineChartData('weeklyAllUserData')">
                <div class="card-panel-icon-wrapper icon-people">
                  <svg-icon icon-class="icon-peoples" class-name="card-panel-icon" name="peoples"/>
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    注册用户
                  </div>
                  <count-to :start-val="0" :end-val=this.userTotal :duration="2000" class="card-panel-num"/>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="7" class="card-panel-col">
              <div class="card-panel" @click="handleSetLineChartData('weeklyAllOrderData')">
                <div class="card-panel-icon-wrapper icon-shopping">
                  <svg-icon icon-class="shopping" class-name="card-panel-icon" name="shopping"/>
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    总订单量
                  </div>
                  <count-to :start-val="0" :end-val="this.orderTotal" :duration="2000" class="card-panel-num"/>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="7" class="card-panel-col">
              <div class="card-panel" @click="handleSetLineChartData('quarterlyAllMoneyData')">
                <div class="card-panel-icon-wrapper icon-money">
                  <svg-icon icon-class="icon-money" class-name="card-panel-icon" name="money"/>
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    资金收益
                  </div>
                  <count-to :start-val="0" :end-val=this.moneyTotal :duration="3000" :decimals="2"
                            class="card-panel-num"/>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row style="background:#fff;padding:0 16px 0;">
            <line-chart :chart-data="lineChartData"/>
          </el-row>
        </el-card>
      </el-col>
      <!-- 右边部分 -->
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card style="min-height:650px;">
            <el-divider content-position="center">公告通知</el-divider>
            <div class="radio" style="margin-bottom: 10px;margin-left: 38px">
              排序：
              <el-radio-group v-model="reverse">
                <el-radio :label="true">倒序</el-radio>
                <el-radio :label="false">正序</el-radio>
              </el-radio-group>
            </div>
            <el-collapse>
              <el-timeline :reverse="reverse">
                <el-timeline-item
                  v-for="notice in noticeList"
                  :key="notice.id"
                  :timestamp="notice.createTime"
                  :color="notice.type === 1?'#E6A23C':'#67C23A'"
                  placement="top">
                  <el-card shadow="hover">
                    <el-badge :value="notice.createBy"/>
                    <el-collapse-item :title="notice.title">
                      <p v-html="notice.content"/>
                      <div style="text-align: right;">
                        <el-button style="color: #409EFF;" type="text" size="mini" icon="el-icon-edit" @click="updateHotel(notice.id)"/>
                        <el-button style="color: red" type="text" size="mini" icon="el-icon-delete" @click="deleteNotice(notice)"/>
                      </div>
                    </el-collapse-item>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-collapse>
            <UpdateNotice v-if="updateNoticeVisible" ref="updateNotice" @refreshDataList="getNoticeList"/>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import CountTo from 'vue-count-to'
import SvgIcon from '../../components/icon-svg/index'
import LineChart from '../../components/LineChart'
import UpdateNotice from '../modules/sys/notice-add-or-update'
import updateAdmin from '../modules/sys/admin-add-or-update'

const lineChartData = {
  weeklyAllUserData: {
    xAbscissa: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
    redData: [0, 0, 0, 0, 0, 0, 0],
    blueData: [0, 0, 0, 0, 0, 0, 0],
    titles: ['', '']
  },
  weeklyAllOrderData: {
    xAbscissa: [],
    redData: [0, 0, 0, 0, 0, 0, 0],
    blueData: [0, 0, 0, 0, 0, 0, 0],
    titles: ['', '']
  },
  quarterlyAllMoneyData: {
    xAbscissa: [],
    redData: [0, 0, 0, 0, 0, 0, 0],
    blueData: [0, 0, 0, 0, 0, 0, 0],
    titles: ['', '']
  }
}

export default {
  components: {
    SvgIcon,
    CountTo,
    LineChart,
    UpdateNotice,
    updateAdmin
  },
  data () {
    return {
      // 公告通知排序
      reverse: true,
      // 需要设置默认值，不然加载无法完成
      lineChartData: lineChartData.weeklyAllUserData,
      // 扇形统计图横坐标
      goodsAddHotelMoneyAbscissa: [],
      // 商品和酒店季度总收益
      goodsAddHotelMoneyData: [],
      // 注册用户总数
      userTotal: 0,
      // 订单总数
      orderTotal: 0,
      // 总资金流动
      moneyTotal: 0,
      dataLoading: false,
      // 公告数据
      noticeList: [],
      // 是否弹出公告通知编辑框
      updateNoticeVisible: false,
      // 是否弹出管理员编辑框
      updateAdminVisible: false,
    }
  },
  mounted () {
    this.initChart()
  },

  created () {
    this.getConsumerData()
    this.getOrderData()
    this.getNoticeList()
  },
  computed: {
    adminInfo: {
      get () {
        return this.$store.state.user.admin
      },
    },
    departmentList: {
      get () {
        return this.$store.state.department.department
      }
    },
  },
  methods: {
    // 图标点击触发事件
    handleSetLineChartData (type) {
      this.lineChartData = lineChartData[type]
    },
    // 加载公告
    getNoticeList () {
      this.$http({
        url: this.$http.adornUrl('/sys/notice/list'),
        method: 'get',
        params: this.$http.adornParams({
          'currentPage': null,
          'pageSize': null,
          'noticeTitle': null,
          'createBy': null,
          'type': null
        })
      }).then(({data}) => {
        if (data && data.code === 200) {
          this.noticeList = data.page.list
        } else {
          this.noticeList = []
          this.$message.error(data.msg)
        }
        this.dataListLoading = false
      })
    },
    // 获取用户数据
    getConsumerData () {
      this.$http({
        url: this.$http.adornUrl('/sys/loginLog/getWeeklyAdminLoginAndUserRegData'),
        method: 'get',
      }).then(({data}) => {
        this.userTotal = data.userTotal[0]
        this.lineChartData = data
        this.$set(lineChartData, 'weeklyAllUserData', data)
      })
    },
    // 获取订单数据
    getOrderData () {
      this.$http({
        url: this.$http.adornUrl('/order/goods/getWeeklyGoodsAndHotelOrderData'),
        method: 'get',
      }).then(({data}) => {
        // console.log(data)
        this.orderTotal = data.orderTotal[0]
        this.lineChartData = data
        this.$set(lineChartData, 'weeklyAllOrderData', data)
      })
    },
    // 绘图
    initChart () {
      // 获取所有资金数据
      this.$http({
        url: this.$http.adornUrl('/order/goods/getQuarterlyGoodsAndHotelMoney'),
        method: 'get',
      }).then(({data}) => {
        this.moneyTotal = data.res.moneyTotal[0]
        this.lineChartData = data.res
        this.$set(lineChartData, 'quarterlyAllMoneyData', data.res)
        this.myChart = echarts.init(document.getElementById('loginReport'), 'macarons')
        this.myChart.setOption({
          title: {
            show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
            text: '总收益', //主标题文本，'\n'指定换行
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            bottom: '10',
            // 数据分类
            data: data.res.xAbscissa
          },
          series: [
            {
              name: '总收入（元）',
              type: 'pie',
              roseType: 'radius',
              radius: [15, 95],
              center: ['50%', '38%'],
              data: data.res.goodsAddHotelMoneyData,
              animationEasing: 'cubicInOut',
              animationDuration: 2600
            }
          ]
        })
      })

    },
    // 更新公告
    updateHotel (id) {
      this.updateNoticeVisible = true
      this.$nextTick(() => {
        // 为子组件addOrUpdate传递部门数据
        this.$refs.updateNotice.dataFromNotice = this.getNoticeById(id)
        this.$refs.updateNotice.init(id)
      })
    },
    // 获取具体要修改得公告
    getNoticeById (id) {
      let noticeInfo = {}
      if (id !== undefined) {
        this.noticeList.map(item => {
          if (item.id === id) {
            noticeInfo = item
          }
        })
      }
      return noticeInfo
    },
    // 删除公告通知
    deleteNotice (notice) {
      let id = [notice.id]
      let titleName = [notice.title]
      this.$confirm(`确定对公告标题为[${titleName.join(',')}]进行[${titleName.length === 1 ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/sys/notice/delete'),
          method: 'post',
          data: this.$http.adornData(id, false)
        }).then(({data}) => {
          if (data && data.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getNoticeList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      }).catch(() => {
      })
    },
    // 更新管理员
    updateAdmin (id) {
      this.updateAdminVisible = true
      this.$nextTick(() => {
        // 为子组件addOrUpdate传递部门数据
        this.$refs.updateAdmin.departmentDataTree = this.departmentList
        this.$refs.updateAdmin.dataFormFromAdmin = this.adminInfo
        this.$refs.updateAdmin.init(id)
      })
    }
  },

}
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}

.mod-home {
  /*line-height: 1.5;*/
}

.admin-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  //border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.admin-info-cont {
  padding-left: 90px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.admin-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.admin-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.admin-info-list span {
  margin-left: 70px;
}

.el-collapse-item__header {
  font-weight: 900;
}

.el-card__body {
  padding: 20px;
}

.el-collapse {
  border-top: 0;
  border-bottom: 0;
}

</style>

